<template>
    <div class="mask-box">
        <video
            ref="video"
            :src="src"
            autoplay
            muted="muted"
            class="video-ele"
        ></video>
        <div v-show="showLine" class="line"></div>
    </div>
</template>

<script lang="ts">
import {
  Vue, Ref, Prop, Watch,
} from 'vue-property-decorator';

export default class VideoScanner extends Vue {
    showLine = false;

    @Prop({
      type: MediaStream,
    })
    src!: MediaStream;

    @Ref('video')
    video!: HTMLVideoElement;

    @Watch('src')
    videoLoad() {
      if (!this.src) { return; }
      this.video.srcObject = this.src;
      this.video.onplay = () => {
        this.showLine = true;
        this.$emit('onplay', this.video);
      };
    }
}
</script>

<style lang='less' scoped>
    .mask-box{
        position: relative;
        width: 100%;
        height: 100%;
        overflow: hidden;
    }
    .video-ele{
        width: 100%;
        transform: rotateY(180deg);
    }
    .line{
        position: absolute;
        top: 0px;
        left: 0px;
        height: 30px;
        background:
            linear-gradient(0deg,rgba(255,255,255,0) 10%, #ff8000 20%,rgba(255,255,255,0) 90%);
        width: 100%;
        animation:scanner 3s infinite ease-in-out ;
    }

    @keyframes scanner {
        0%{
            top: -30px;
        }

        100%{
            top: 110%;
        }
    }
</style>
